//通过class选择器获取添加元素
const addE = document.querySelector('.add')
// console.log(addE,'addE')
//通过class选择器获取删除元素
const cancelE = document.querySelector('.cancel')
//通过class选择器获取ul元素
const oUl = document.querySelector('.list3')
//通过class选择器获取ul中的li元素，返回一个类数组
//getElementsByTagName与querySelectorAll差不多，前者返回HTMLCollection动态集合，后者返回NodeList静态集合(不受DOM元素变化的理解)
const oLi = document.getElementsByTagName('li')
console.log(oLi, '添加前')
//添加元素后，为了给li元素增加文本内容做准备
const str = "我是li"
var num = 3;
//for循环给每一个li元素注册鼠标移入移出事件
function mHover() {
        for (var i = 0; i < oLi.length; i++) {
                oLi[i].onmouseover = function () {
                        this.style.backgroundColor = "DarkSalmon";
                }
                oLi[i].onmouseout = function () {
                        this.style.backgroundColor = "FloralWhite";
                }
        }
}
mHover()
//给按钮添加点击事件，并实现添加li元素的功能
addE.onclick = function () {
        num++;
        //创建li元素节点
        const nLi = document.createElement('li')
        // console.log(nLi,'nLi')
        //创建文本节点
        const textNode = document.createTextNode('我是li' + num)
        // console.log(textNode,'textNode')
        //将文本节点插入li元素节点中
        nLi.appendChild(textNode)
        // console.log(nLi.appendChild(textNode),'nLi.appendChild(textNode)')
        //将组合后的li元素，再放入到ul元素内部子元素的末尾
        oUl.appendChild(nLi)
        console.log(oLi, '添加后')
        ////动态添加li元素后，希望给它们也添加上鼠标移入移出事件，此处执行此函数即可实现
        mHover()
}
//给按钮添加点击事件，并实现删除li元素的功能
cancelE.onclick = function () {
        //删除新增加的那个li元素
        oUl.removeChild(oUl.lastElementChild);
        num--;
        mHover();//如果没有这条语句，那么新增的li元素不会拥有鼠标移入移出事件
}